<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #capitalColor {
        width: 40px;
        height: 100px;
        background-color: red;
    }

    #compoundAmountColor {
        width: 40px;
        height: 100px;
        background-color: green;
    }

    table div {
        margin: 0 auto;
    }

    /* vertical-align 属性设置元素的垂直对齐方式。 */
    table td {
        vertical-align: bottom;
        text-align: center;
        padding: 10px;
    }
</style>

<body>
    <!-- // initial: 总存款的初始值
    // interest: 例如 0.05 意味着每年涨幅 5%
    // years: 要等待多少年 -->
    <h2>复利计算器</h2>
    <form action="" name="calculator">
        <div>本金：<input type="text" name="money" id=""></div>
        <div>年利率：<input type="number" name="interest" id="">%</div>
        <div>
            年期：<select name="years" id="">
                <option value="0.25">3个月(0.25年)</option>
                <option value="0.5">6个月(0.5年)</option>
                <option value="1">12个月(1年)</option>
                <option value="1.5">18个月(1.5年)</option>
                <option value="2">24个月(2年)</option>
                <option value="2.5">30个月(2.5年)</option>
                <option value="3">36个月(3年)</option>
                <option value="5">60个月(5年)</option>
            </select>
        </div>
    </form>
    <table style="margin-top: 20px;">
        <tr>
            <th>本金</th>
            <th>复利终值</th>
        </tr>
        <tr>
            <td id="money-before"></td>
            <td id="money-after"></td>
        </tr>
        <tr>
            <td>
                <div id="capitalColor"></div>
            </td>
            <td>
                <div id="compoundAmountColor"></div>
            </td>
        </tr>
    </table>
    <script>
        //获取表单
        var form = document.forms.calculator;
        console.log(form);
        //oninput 事件在用户输入时触发。
        form.money.oninput = calculator;
        form.interest.oninput = calculator;
        form.years.oninput = calculator;
        function calculator() {
            var initial = form.money.value;
            console.log(initial);
            var interest = form.interest.value * 0.01;
            console.log(interest);
            var years = form.years.value;
            console.log(years);
            var result = Math.round(initial * (1 + interest * years));
            console.log(result);
            let height = result / initial * 100 + 'px';
            document.getElementById('compoundAmountColor').style.height = height;
            document.getElementById('money-before').innerHTML = initial;
            document.getElementById('money-after').innerHTML = result;
        }
    </script>
</body>

</html>